<template>
  <div class="login-container">
    <!-- 登录页 -->
    <!-- 表单 -->
    <div class="login-form">
      <div class="title">诚信数据可视化展示平台</div>
      <div class="form-box">
        <el-form :model="loginForm" :rules="rules" ref="login" label-width="70px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <div style="display: flex; justify-content: space-between;">
            <div style="width: 220px">
              <el-form-item label="验证码" prop="code">
                <el-input v-model="loginForm.code" placeholder="请输入验证码"></el-input>
              </el-form-item>
            </div>
            <div class="code" @click="getCodeImgSrc">
              <img :src="codeImgScr" alt="" style="width: 100%; height: 100%">
            </div>
          </div>
        </el-form>
      </div>
      <div class="btn">
        <el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
      </div>
      <div class="register">
        <el-button type="text" @click="toReg">去注册</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getCodeImg } from '@/api/login'
export default {
  name: 'Login',
  data() {
    return {
      // 验证码图片地址
      codeImgScr: '',
      // 登录表单
      loginForm: {
        username:'admin',
        password: 'admin123',
        code: '',
        uuid: ''
      },
      rules:{
        username:[
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { pattern: /^\S{6,15}$/, message: "密码必须是6-15位的非空字符", trigger: "blur"},
        ],
        code: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ]
      }
    }
  },
  mounted() {
    this.getCodeImgSrc()
  },
  methods: {
    toReg() {
      this.$router.push('/reg')
    },
    // 这里的 data:image/png;base64, 是一个前缀，指定了数据类型和编码方式，后面的部分是编码后的图片数据
    async getCodeImgSrc() {
      const res = await getCodeImg()
      // console.log(res);
      this.codeImgScr = 'data:image/png;base64,' + res.img
      this.loginForm.uuid = res.uuid
    },
    login() {
      // 兜底校验
      this.$refs.login.validate(async(valid) => {
        if(valid) {
          // 掉登录接口
          await this.$store.dispatch('Login', this.loginForm)
          // 提示用户
          this.$message.success('登录成功')
          // 跳转到首页
          this.$router.push('/')
        }
      })
      
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  position: relative;
  // ???????
  height: 737px;
  background: url('@/static/images/login.jpg');
  background-position: center;
}


.login-form {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  padding: 20px;
  background-color: #fff;
}
.title {
  // position: absolute;
  // z-index: 9;
  color: #889aa4;
  font-size: 24px;
  text-align: center;
}
.form-box{
  margin-top: 30px;
}
.btn {
  margin-top: 40px;
  
}
.code {
  width: 120px;
  height: 40px;
  background-color: pink;
}
.register{
  margin-top: 10px;
  text-align: right;
  color: #ccc;
}
</style>